<script setup>
import { ref } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
let username = ref('18942508364')
let password = ref('lizhishu')
console.warn(password, username)
const fullscreenLoading = ref(false)
const resetForm = async () => {
  username.value = ''
  password.value = ''
}

const submitForm = async () => {
  fullscreenLoading.value = true
  if (!username.value || !password.value) {
    ElMessage({
      type: 'error',
      message: '请输入账号或密码!'
    })
    fullscreenLoading.value = false
    return
  }
  // if (username.value != 'dyadmin') {
  //   ElMessage({
  //     type: 'error',
  //     message: '请输入账号错误!'
  //   })
  //   fullscreenLoading.value = false
  //   return
  // }
  // if (password.value != '4561230aA!@#') {
  //   ElMessage({
  //     type: 'error',
  //     message: '请输入密码错误!'
  //   })
  //   fullscreenLoading.value = false
  //   return
  // }
  let response_ = await fetch(`http://208.87.207.213:38390/CloudUser/Login`, {
    method: 'POST',
    headers: {
      'content-type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({
      number_account: username.value,
      password: password.value
    })
  })
  let response = await response_.json()
  console.warn(response)
  if (response.code != 200) {
    ElMessage({
      type: 'error',
      message: response.msg
    })
    fullscreenLoading.value = false
    return
  }
  localStorage.setItem('userinfo', JSON.stringify(response.data))
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(true)
    }, 1000)
  })
  fullscreenLoading.value = false
  ElNotification.success({
    title: '温馨提示',
    message: '欢迎登录系统！',
    offset: 100
  })
  localStorage.setItem('isLogin', true)
  router.push({
    path: '/',
    query: {
      ...route.query
    }
  })
  return
}
</script>
<template>
  <div class="login no-drag">
    <div class="loginPart">
      <el-form label-position="right" label-width="100px" status-icon style="max-width: 460px">
        <el-form-item label="用户名：">
          <el-input v-model="username" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button
            v-loading.fullscreen.lock="fullscreenLoading"
            type="primary"
            @click="submitForm('ruleFormRef')"
          >
            登录用户
          </el-button>
          <el-button @click="resetForm('ruleFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="less">
.loginPart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loginPart h4 {
  margin: 0 0 10px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.login {
  width: 100vw;
  height: 100%;
  background-image: url(/src/assets/loginbgm.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
